---
title: typescript-svelte-apollo
description: This plugin generates observable Apollo queries with Typescript typings. This is a community plugin, to report eventual issues or find more examples, refer to this repository
---

import { PluginHeader } from '@/components/plugin'
import { pluginGetStaticProps } from '@/lib/plugin-get-static-props'
export const getStaticProps = pluginGetStaticProps(__filename)

<PluginHeader />

This plugin generates observable Apollo queries with Typescript typings.

This is a community plugin, to report eventual issues or find more examples, refer to this [repository](https://github.com/ticruz38/graphql-codegen-svelte-apollo#readme)

It extends the basic TypeScript plugins: `@graphql-codegen/typescript`, `@graphql-codegen/typescript-operations` - and thus shares a similar configuration.

## API Reference

### `clientPath`

type: `string`
default: `null`
required: true

Path to the apollo client for this project (should point to a file with an apollo-client as default export)

#### Usage Examples

```ts filename="codegen.ts"
import type { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  generates: {
    'path/to/file.ts': {
      plugins: ['typescript', 'typescript-operations', 'graphql-codegen-svelte-apollo'],
      config: {
        clientPath: 'PATH_TO_APOLLO_CLIENT'
      }
    }
  }
}
export default config
```

### `asyncQuery`

type: `boolean`
default: `false`

By default, the plugin only generate observable queries, sometimes it may be useful to generate promise-based queries

#### Usage Examples

```ts filename="codegen.ts"
import type { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  generates: {
    'path/to/file.ts': {
      plugins: ['typescript', 'typescript-operations', 'graphql-codegen-svelte-apollo'],
      config: {
        clientPath: 'PATH_TO_APOLLO_CLIENT',
        asyncQuery: true
      }
    }
  }
}
export default config
```

## Usage Example

### With Observable queries

For the given input:

```graphql
fragment TransactionFragment on TransactionDescription {
  contractAddress
  from
  gasUsed
  gasPrice
  input
  isError
  to
  value
}

query Transactions($address: String) {
  transactions(address: $address) {
    ...TransactionFragment
  }
}
```

And the following configuration:

```ts filename="codegen.ts"
import type { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  schema: 'YOUR_SCHEMA_HERE',
  documents: './src/**/*.graphql',
  generates: {
    'path/to/file.ts': {
      plugins: ['typescript', 'typescript-operations', 'graphql-codegen-svelte-apollo'],
      config: {
        clientPath: 'PATH_TO_APOLLO_CLIENT'
      }
    }
  }
}
export default config
```

Codegen will pre-compile the GraphQL operation into a `DocumentNode` object, and generate a ready-to-use Apollo query for each operation you have.

In your application code, you can import it from the generated file, and use the query in your component code:

```svelte
<script lang="ts">
  import { Transactions } from 'codegen'

  var address = '0x0000000000000000000000000000'
  $: t = Transactions({ address })
</script>

<ul>
  {#each $t?.data?.transactions || [] as transaction}
    <li>Sent transaction from {transaction.from} to {transaction.to}</li>
  {/each}
</ul>
```

Each time you change the address, the query will re-fetch and show the new results in the template.

### With Async Queries

Sometimes, you may need/prefer to have an async query (only available with asyncQuery option set to true)

For the given input:

```graphql
fragment TransactionFragment on TransactionDescription {
  contractAddress
  from
  gasUsed
  gasPrice
  input
  isError
  to
  value
}

query Transactions($address: String) {
  transactions(address: $address) {
    ...TransactionFragment
  }
}
```

And the following configuration:

```ts filename="codegen.ts"
import type { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  schema: 'YOUR_SCHEMA_HERE',
  documents: './src/**/*.graphql',
  generates: {
    'path/to/file.ts': {
      plugins: ['typescript', 'typescript-operations', 'graphql-codegen-svelte-apollo'],
      config: {
        clientPath: 'PATH_TO_APOLLO_CLIENT',
        asyncQuery: true
      }
    }
  }
}
export default config
```

Codegen will pre-compile the GraphQL operation into a `DocumentNode` object, and generate a ready-to-use Apollo query for each operation you have.

In your application code, you can import it from the generated file, and use the query in your component code:

```svelte
<script lang="ts">
  import { AsyncTransactions } from 'codegen'

  var address = '0x0000000000000000000000000000'
</script>

<ul>
  {#await AsyncTransactions({ address })}
    Loading…
  {:then transactions}
    {#each transactions || [] as transaction}
      <li>Sent transaction from {transaction.from} to {transaction.to}</li>
    {/each}
  {/await}
</ul>
```
